<!--
 * @desc: 
 * @LastEditTime: 2022-10-31 15:44:50
 * @params: 
 * @return:: 
-->
<template>
  <view>
    <scroll-view
      style="height: 300px"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="100"
      refresher-background="lightgreen"
      @refresherpulling="onPulling"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
    ></scroll-view>
  </view>
  <view class="container">
    <movable-area>
      <movable-view :x="x" :y="y" direction="all"> </movable-view>
    </movable-area>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const x = ref<Number>(0)
const y = ref<Number>(0)

const triggered = ref<Boolean>(false)
function onPulling(e) {
  console.log('onpulling', e)
}

function onRefresh() {}

function onAbort() {
  console.log('onAbort')
}

function onRestore() {
  triggered.value = 'restore'
}
</script>
<style lang="scss">
.container {
}
movable-area {
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
movable-view {
  width: 100px;
  height: 100px;
  // background: green;
  background: url(../../../static/蜡笔.png);
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
